<div ng-controller="AdminTrainingCtrl as vm">
    <section class="content-header">
        <!-- Content Header (Page header) -->
        Training Summary
         <div class="pull-right">
                        <form class="form-inline">
                          <div class="form-group">
                            <select class="form-control" ng-options="div for div in years track by div" ng-model="vm.year" ng-change="vm.loadData()">
                      </select>
                          </div>
                          <div class="form-group">
                            <select class="form-control" ng-options="div for div in months track by div" ng-model="vm.month" ng-change="vm.loadData()">
                      </select>
                          </div>
                          <div class="form-group">
                                    <select class="form-control" ng-options="div.name for div in regions track by div.id" ng-model="vm.region" ng-change="vm.loadData()">
                                        <option ng-if="role!='Sub-Region Admin'" value="">--- Sub-Region ---</option>
                                    </select>
                                </div>
                        
                       <a class="btn btn-primary" ng-href="{{vm.reportlink2}}">Export Region Summary</a>
                       <a class="btn btn-primary" ng-href="{{vm.reportlink3}}">Export Hotel Summary</a>
</form>
                      
                    </div>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Training Leader Certification Target Review</h3>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table ng-table="vm.tableParams1" class="table table-hover table-bordered table-condensed" template-header="customHeader.html" show-filter="true">
                            <tr ng-repeat="ret in $data">
                                <td width="200px" title="'Region Name'" filter="{ name: 'text'}" sortable="'name'">
                                    {{ret.name}}</td>
                                <td ng-switch='ret.ctc!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label " ng-class="[{'bg-red': ret.ctc.tValueP<ret.ctc.tTarget},{'bg-green': ret.ctc.tValueP>=ret.ctc.tTarget}]">{{ret.ctc.tValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.ctc!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.ctc.tTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>90.00%</div>
                                </td>
                                <td ng-switch='ret.ctc!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.ctc.hValueP | percentage}}
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.gtc!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.gtc.tValueP<ret.gtc.tTarget},{'bg-green': ret.gtc.tValueP>=ret.gtc.tTarget}]">{{ret.gtc.tValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.gtc!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.gtc.tTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>90%</div>
                                </td>
                                <td ng-switch='ret.gtc!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.gtc.hValueP | percentage}}
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.mtd!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.mtd.tValueP<ret.mtd.tTarget},{'bg-green': ret.mtd.tValueP>=ret.mtd.tTarget}]">{{ret.mtd.tValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.mtd!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.mtd.tTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>90.00%</div>
                                </td>
                                <td ng-switch='ret.mtd!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.mtd.hValueP | percentage}}
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.bsb!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.bsb.tValueP<ret.bsb.tTarget},{'bg-green': ret.bsb.tValueP>=ret.bsb.tTarget}]">{{ret.bsb.tValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.bsb!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.bsb.tTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>100.00%</div>
                                </td>
                                <td ng-switch='ret.bsb!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.bsb.hValueP | percentage}}
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.lopm!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.lopm.tValueP<ret.lopm.tTarget},{'bg-green': ret.lopm.tValueP>=ret.lopm.tTarget}]">{{ret.lopm.tValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.lopm!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.lopm.tTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                                <td ng-switch='ret.lopm!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.lopm.hValueP | percentage}}
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.aldp!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.aldp.tValueP<ret.aldp.tTarget},{'bg-green': ret.aldp.tValueP>=ret.aldp.tTarget}]">{{ret.aldp.tValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.aldp!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.aldp.tTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.aldp!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.aldp.hValueP | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                                

                            </tr>
                            <tr>
                                <th>Total</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total1.ctc1<vm.total1.ctc2},{'bg-green': vm.total1.ctc1>vm.total1.ctc2}]">{{vm.total1.ctc1 | percentage}}</span></th>
                                <th>{{vm.total1.ctc2 | percentage}}</th>
                                <th>{{vm.total1.ctc3 | percentage}}</th>
                               <th><span class="label" ng-class="[{'bg-red': vm.total1.gtc1<vm.total1.gtc2},{'bg-green': vm.total1.gtc1>vm.total1.gtc2}]">{{vm.total1.gtc1 | percentage}}</span></th>
                                <th>{{vm.total1.gtc2 | percentage}}</th>
                                <th>{{vm.total1.gtc3 | percentage}}</th>
                               <th><span class="label" ng-class="[{'bg-red': vm.total1.mtd1<vm.total1.mtd2},{'bg-green': vm.total1.mtd1>vm.total1.mtd2}]">{{vm.total1.mtd1 | percentage}}</span></th>
                                <th>{{vm.total1.mtd2 | percentage}}</th>
                                <th>{{vm.total1.mtd3 | percentage}}</th>
                               <th><span class="label" ng-class="[{'bg-red': vm.total1.bsb1<vm.total1.bsb2},{'bg-green': vm.total1.bsb1>vm.total1.bsb2}]">{{vm.total1.bsb1 | percentage}}</span></th>
                                <th>{{vm.total1.bsb2 | percentage}}</th>
                                <th>{{vm.total1.bsb3 | percentage}}</th>
                               <th><span class="label" ng-class="[{'bg-red': vm.total1.lopm1<vm.total1.lopm2},{'bg-green': vm.total1.lopm1>vm.total1.lopm2}]">{{vm.total1.lopm1 | percentage}}</span></th>
                                <th>{{vm.total1.lopm2 | percentage}}</th>
                                <th>{{vm.total1.lopm3 | percentage}}</th>
                               <th><span class="label" ng-class="[{'bg-red': vm.total1.aldp1<vm.total1.aldp2},{'bg-green': vm.total1.aldp1>vm.total1.aldp2}]">{{vm.total1.aldp1 | percentage}}</span></th>
                                <th>{{vm.total1.aldp2 | percentage}}</th>
                                <th>{{vm.total1.aldp3 | percentage}}</th>
                               
                                
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- /.box -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Middle Management Training Target Review</h3>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table ng-table="vm.tableParams2" class="table table-hover table-bordered table-condensed" template-header="customHeader2.html" show-filter="true">
                            <tr ng-repeat="ret in $data">
                                <td width="200px" title="'Region Name'" filter="{ name: 'text'}" sortable="'name'">
                                    {{ret.name}}</td>
                                <td ng-switch='ret.ctc!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.ctc.hValueP<ret.ctc.hTarget},{'bg-green': ret.ctc.hValueP>=ret.ctc.hTarget}]">{{ret.ctc.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.ctc!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.ctc.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.gtc!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.gtc.hValueP<ret.gtc.hTarget},{'bg-green': ret.gtc.hValueP>=ret.gtc.hTarget}]">{{ret.gtc.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.gtc!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.gtc.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.mtd!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.mtd.hValueP<ret.mtd.hTarget},{'bg-green': ret.mtd.hValueP>=ret.mtd.hTarget}]">{{ret.mtd.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.mtd!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.mtd.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.bi!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.bi.hValueP<ret.bi.hTarget},{'bg-green': ret.bi.hValueP>=ret.bi.hTarget}]">{{ret.bi.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.bi!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.bi.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.slo!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.slo.hValueP<ret.slo.hTarget},{'bg-green': ret.slo.hValueP>=ret.slo.hTarget}]">{{ret.slo.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.slo!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.slo.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.slf!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.slf.hValueP<ret.slf.hTarget},{'bg-green': ret.slf.hValueP>=ret.slf.hTarget}]">{{ret.slf.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.slf!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.slf.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.mlo!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.mlo.hValueP<ret.mlo.hTarget},{'bg-green': ret.mlo.hValueP>=ret.mlo.hTarget}]">{{ret.mlo.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.mlo!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.mlo.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.mlf!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.mlf.hValueP<ret.mlf.hTarget},{'bg-green': ret.mlf.hValueP>=ret.mlf.hTarget}]">{{ret.mlf.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.mlf!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.mlf.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                <td ng-switch='ret.coach!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.coach.hValueP<ret.coach.hTarget},{'bg-green': ret.coach.hValueP>=ret.coach.hTarget}]">{{ret.coach.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.coach!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.coach.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>75.00%</div>
                                </td>
                                
                            </tr>
                            <tr>
                                <th>Total</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.ctc1<vm.total2.ctc2},{'bg-green': vm.total2.ctc1>vm.total2.ctc2}]">{{vm.total2.ctc1 | percentage}}</span></th>
                                <th>{{vm.total2.ctc2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.gtc1<vm.total2.gtc2},{'bg-green': vm.total2.gtc1>vm.total2.gtc2}]">{{vm.total2.gtc1 | percentage}}</span></th>
                                <th>{{vm.total2.gtc2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.mtd1<vm.total2.mtd2},{'bg-green': vm.total2.mtd1>vm.total2.mtd2}]">{{vm.total2.mtd1 | percentage}}</span></th>
                                <th>{{vm.total2.mtd2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.bi1<vm.total2.bi2},{'bg-green': vm.total2.bi1>vm.total2.bi2}]">{{vm.total2.bi1 | percentage}}</span></th>
                                <th>{{vm.total2.bi2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.slo1<vm.total2.slo2},{'bg-green': vm.total2.slo1>vm.total2.slo2}]">{{vm.total2.slo1 | percentage}}</span></th>
                                <th>{{vm.total2.slo2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.slf1<vm.total2.slf2},{'bg-green': vm.total2.slf1>vm.total2.slf2}]">{{vm.total2.slf1 | percentage}}</span></th>
                                <th>{{vm.total2.slf2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.mlo1<vm.total2.mlo2},{'bg-green': vm.total2.mlo1>vm.total2.mlo2}]">{{vm.total2.mlo1 | percentage}}</span></th>
                                <th>{{vm.total2.mlo2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.mlf1<vm.total2.mlf2},{'bg-green': vm.total2.mlf1>vm.total2.mlf2}]">{{vm.total2.mlf1 | percentage}}</span></th>
                                <th>{{vm.total2.mlf2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total2.coach1<vm.total2.coach2},{'bg-green': vm.total2.coach1>vm.total2.coach2}]">{{vm.total2.coach1 | percentage}}</span></th>
                                <th>{{vm.total2.coach2 | percentage}}</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- /.box -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">IHG Frontline for Employee Target Review</h3>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table ng-table="vm.tableParams3" class="table table-hover table-bordered table-condensed" template-header="customHeader3.html" show-filter="true">
                            <tr ng-repeat="ret in $data">
                                <td width="200px" title="'Region Name'" filter="{ name: 'text'}" sortable="'name'">
                                    {{ret.name}}</td>
                               <td ng-switch='ret.problem!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.problem.hValueP<ret.problem.hTarget},{'bg-green': ret.problem.hValueP>=ret.problem.hTarget}]">{{ret.problem.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.problem!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.problem.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                                <td ng-switch='ret.reward!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.reward.hValueP<ret.reward.hTarget},{'bg-green': ret.reward.hValueP>=ret.reward.hTarget}]">{{ret.reward.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.reward!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.reward.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                                <td ng-switch='ret.brand!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.brand.hValueP<ret.brand.hTarget},{'bg-green': ret.brand.hValueP>=ret.brand.hTarget}]">{{ret.brand.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.brand!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.brand.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                            </tr>
                            <tr>
                                <th>Total</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total3.problem1<vm.total3.problem2},{'bg-green': vm.total3.problem1>vm.total3.problem2}]">{{vm.total3.problem1 | percentage}}</span></th>
                                <th>{{vm.total3.reward2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total3.reward1<vm.total3.reward2},{'bg-green': vm.total3.reward1>vm.total3.reward2}]">{{vm.total3.reward1 | percentage}}</span></th>
                                <th>{{vm.total3.reward2 | percentage}}</th>
                                <th><span class="label" ng-class="[{'bg-red': vm.total3.brand1<vm.total3.brand2},{'bg-green': vm.total3.brand1>vm.total3.brand2}]">{{vm.total3.brand1 | percentage}}</span></th>
                                <th>{{vm.total3.brand2 | percentage}}</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- /.box -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Excom Training Target Review</h3>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table ng-table="vm.tableParams4" class="table table-hover table-bordered table-condensed" template-header="customHeader4.html" show-filter="true">
                            <tr ng-repeat="ret in $data">
                                <td width="200px" title="'Region Name'" filter="{ name: 'text'}" sortable="'name'">
                                    {{ret.name}}</td>
                                <td ng-switch='ret.coaching!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.coaching.hValueP<ret.coaching.hTarget},{'bg-green': ret.coaching.hValueP>=ret.coaching.hTarget}]">{{ret.coaching.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.coaching!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.coaching.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                                <td ng-switch='ret.elearn!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.elearn.hValueP<ret.elearn.hTarget},{'bg-green': ret.elearn.hValueP>=ret.elearn.hTarget}]">{{ret.elearn.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.elearn!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.elearn.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                                <td ng-switch='ret.learnDay!=null'>
                                    <div ng-switch-when="true">
                                        <span class="label" ng-class="[{'bg-red': ret.learnDay.hValueP<ret.learnDay.hTarget},{'bg-green': ret.learnDay.hValueP>=ret.learnDay.hTarget}]">{{ret.learnDay.hValueP | percentage}}</span>
                                        </div>
                                    <div ng-switch-default>0</div>
                                </td>
                                <td ng-switch='ret.learnDay!=null'>
                                    <div ng-switch-when="true">
                                        {{ret.learnDay.hTarget | percentage}}
                                        </div>
                                    <div ng-switch-default>70.00%</div>
                                </td>
                                
                            </tr>
                            <tr>
                                <th>Total</th>
                                 <th><span class="label" ng-class="[{'bg-red': vm.total4.coaching1<vm.total4.coaching2},{'bg-green': vm.total4.coaching1>vm.total4.coaching2}]">{{vm.total4.coaching1 | percentage}}</span></th>
                                <th>{{vm.total4.coaching2 | percentage}}</th>
                                 <th><span class="label" ng-class="[{'bg-red': vm.total4.elearn1<vm.total4.elearn2},{'bg-green': vm.total4.elearn1>vm.total4.elearn2}]">{{vm.total4.elearn1 | percentage}}</span></th>
                                <th>{{vm.total4.elearn2 | percentage}}</th>
                                 <th><span class="label" ng-class="[{'bg-red': vm.total4.learnDay1<vm.total4.learnDay2},{'bg-green': vm.total4.learnDay1>vm.total4.learnDay2}]">{{vm.total4.learnDay1 | percentage}}</span></th>
                                <th>{{vm.total4.learnDay2 | percentage}}</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- /.box -->
                <div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">Individual Hotel Training Report Export</h3>
        <div class="pull-right">
        </div>
    </div>
    <div class="box-body table-responsive no-padding">
        <table ng-table="vm.tableParams6" class="table table-hover table-bordered table-condensed" show-filter="true">
            <tr ng-repeat="ret in $data">
                <td title="'Holidex Code'" filter="{ 'code': 'text'}" sortable="'code'">
                    {{ret.code}}</td>
                <td title="'Region'" filter="{ 'region.name': 'text'}" sortable="'region.name'">
                    {{ret.region.name}}</td>
                <td title="'Cluster'" filter="{ 'cluster.name': 'text'}" sortable="'cluster.name'">
                    {{ret.cluster.name}}</td>
                <td title="'Hotel Name'" filter="{ name: 'text'}" sortable="'name'">
                    {{ret.name}}</td>
                <td title="'Brand'" filter="{ 'brand': 'text'}" sortable="'brand'">
                    {{ret.brand}}</td>
                <td title="'Export'">
                    <a class="btn btn-xs btn-primary" ng-href="{{vm.reportlink+ret.id}}">Export</td>
                            </tr>
                       
                            </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

            </div>
        </div>

    </section>
    <script type="text/ng-template" id="customHeader.html">
    <tr>    
                                    <th rowspan="2">Sub-Regions</th>
                                    <th colspan="3" class="text-center">CTC</th>
                                    <th colspan="3" class="text-center">GTC</th>
                                    <th colspan="3" class="text-center">MTD</th>
                                    <th colspan="3" class="text-center">BSB</th>
                                    <th colspan="3" class="text-center">Leading Others Program Managers</th>
                                    <th colspan="3" class="text-center">ALDP TTT</th>
                                </tr>
                                <tr>    
                                    <th>Training Leader %</th>
                                    <th>Target</th>
                                    <th>Hotel %</th>

                                    <th>Training Leader %</th>
                                    <th>Target</th>
                                    <th>Hotel %</th>

                                    <th>Training Leader %</th>
                                    <th>Target</th>
                                    <th>Hotel %</th>

                                    <th>Training Leader %</th>
                                    <th>Target</th>
                                    <th>Hotel %</th>

                                    <th>Training Leader %</th>
                                    <th>Target</th>
                                    <th>Hotel %</th>

                                    <th>Training Leader %</th>
                                    <th>Target</th>
                                    <th>Hotel %</th>                                   
                                </tr>
  </script>
  <script type="text/ng-template" id="customHeader2.html">
    <tr>    
                                    <th rowspan="2">Sub-Regions</th>
                                    <th colspan="2" class="text-center">CTC</th>
                                    <th colspan="2" class="text-center">GTC</th>
                                    <th colspan="2" class="text-center">MTD</th>
                                    <th colspan="2" class="text-center">BI</th>
                                    <th colspan="2" class="text-center">Leading Others Supervisor</th>
                                    <th colspan="2" class="text-center">Leadership Fundamental Supervisor</th>
                                    <th colspan="2" class="text-center">Leading Others Manager</th>
                                    <th colspan="2" class="text-center">Leadership Fundamental Manager</th>
                                    <th colspan="2" class="text-center">Coach for Peak Performance Manager</th>
                                </tr>
                                <tr>    
                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>

                                    <th>%</th>
                                    <th>Target</th>         

                                    <th>%</th>
                                    <th>Target</th>

                                    <th>%</th>
                                    <th>Target</th>    
                                    <th>%</th>
                                    <th>Target</th>                                 
                                </tr>
  </script>
    <script type="text/ng-template" id="customHeader3.html">
    <tr>    
                                    <th rowspan="2">Sub-Regions</th>
                                    <th colspan="2" class="text-center">IHG Problem Handling</th>
                                    <th colspan="2" class="text-center">IHG Rewards Club</th>
                                    <th colspan="2" class="text-center">Brand Orientation</th>
                                
                                </tr>
                                <tr>    
                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>
                                                                    
                                </tr>
  </script>
    <script type="text/ng-template" id="customHeader4.html">
    <tr>    
                                    <th rowspan="2">Sub-Regions</th>
                                    <th colspan="2" class="text-center">Coaching (HMM)</th>
                                    <th colspan="2" class="text-center">IHG Coaching eLearning</th>
                                    <th colspan="2" class="text-center">Learning Day</th>
                                   
                                </tr>
                                <tr>    
                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>
                                    

                                    <th>%</th>
                                    <th>Target</th>
                                                       
                                </tr>
  </script>
</div>
